<script lang="ts" setup name="laiHeader">
import { ArrowLeft } from "@element-plus/icons-vue";
interface Props {
  isShowBack?: boolean;
  title: string;
  height?: number;
  bgColor: string;
  isShowButton?: boolean;
  buttonText?: string;
}
const props = withDefaults(defineProps<Props>(), {
  isShowBack: false,
  isShowButton: false,
  buttonText: "确定",
  title: "",
  height: 50,
  bgColor: "#fff"
});

interface Emits {
  (name: "goBack"): void;
  (name: "onConfirm"): void;
}
const emits = defineEmits<Emits>();
</script>

<template>
  <div class="affix-container">
    <el-affix target=".affix-container" :offset="80">
      <div :style="{ height: props.height + 'px', backgroundColor: props.bgColor }" class="content">
        <el-icon style="cursor: pointer" @click="emits('goBack')" v-if="props.isShowBack"><ArrowLeft /></el-icon>
        <div class="title">{{ props.title }}</div>
        <div class="btn" v-if="props.isShowButton">
          <el-button @click="emits('onConfirm')" type="primary">{{ props.buttonText }}</el-button>
        </div>
      </div>
    </el-affix>
  </div>
</template>

<style lang="scss" scoped>
.affix-container {
  margin-bottom: 10px;
}
.content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  .title {
    flex: 1;
    margin-left: 5px;
    font-size: 18px;
  }
  .btn {
    width: 50px;
    padding-right: 20px;
  }
}
</style>
